<!DOCTYPE html>
<html>
  <head>
    <link href="ui/theme/plus/jquery.ui.all.css?v=1" rel="stylesheet" type="text/css"/>
		<style type="text/css">
			*{font-family:Arial;font-size:11px;}
			body{background-color:#fff}
			html, body, {margin: 0;padding: 0;height: 100%;}
			#map{margin: 0;padding: 0;height: 300px;width:450px;}
			.group{font-size:11px;border:solid 0px #ddd}
			#controles{position:absolute;top:5px;left:300px;z-Index:1000;}
			#msg{border:solid 1px #ddd; background-color:#FDF1BF;height:300px;overflow:auto;padding:5px;font-size:11px;color:#C02B55}
			.btn{cursor:pointer}
		</style>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="msg.js"></script>
    <script type="text/javascript" src="map.js"></script>
    <script type="text/javascript" src="lobo1.js"></script>
    <script type="text/javascript" src="lobo2.js"></script>
    
		<script type="text/javascript">			
		var gpsdata = {
			seed: function () {
      	var d = new Date();
      	return d.getTime()
    	},
			cargar:function(id){
				console.log('cargar datos');
				$.ajax({
					url:'data/lobo0'+id+'.json?'+this.seed(),
					datatype:'application/json',
					success:function(data){
						data = data.d?data.d:data;
						var i = data.Table.rows.length,
						total = data.Table.rows.length,
						fila = data.Table.rows,
						grilla = ''
						cod_act=0,lat=1,lon=2,hora=3,icono=null;
						
						mapa.map.panTo(new google.maps.LatLng(fila[0][lat],fila[0][lon]));
						
						switch(id){
							case 1:icono = mapa.pin[1];poly[1] = new google.maps.Polyline(mapa.polyOptions[1]);break;
							case 2:icono = mapa.pin[2];poly[2] = new google.maps.Polyline(mapa.polyOptions[2]);break;
							case 3:icono = mapa.pin[3];poly[3] = new google.maps.Polyline(mapa.polyOptions[3]);break;
							case 4:icono = mapa.pin[4];poly[4] = new google.maps.Polyline(mapa.polyOptions[4]);break;
							case 5:icono = mapa.pin[5];poly[5] = new google.maps.Polyline(mapa.polyOptions[5]);break;
						}
						poly[id].setMap(mapa.map);
						path[id] = poly[id].getPath();
						while(i--){
							grilla+='<div onclick="gpsdata.posicionar('+fila[i][lat]+','+fila[i][lon]+',\''+fila[i][hora]+'\')">'+fila[i][hora]+'</div>';
							posActual = new google.maps.LatLng(fila[i][lat],fila[i][lon]);
							var marker = new google.maps.Marker({
								position:  posActual,
								map:       mapa.map,
								title:     fila[i][hora] + ' @ ' +posActual.toString(),
								animation: google.maps.Animation.DROP,
								icon:      icono
							});
							path[id].push(posActual);
						}

						//$('#jqactividad').html(grilla);

					},
					error:function (xhr, ajaxOptions, thrownError){
						console.log(xhr.status);
						console.log(thrownError);
					}  
				});
			},
			posicionar:function(lat,lon,hora){
				var myLatlng = new google.maps.LatLng( lat,lon );
				try{
					var marker = new google.maps.Marker({
						position: myLatlng,
						map: mapa.map,
						title: 'Hora: '+hora+' - Posicion: '+ myLatlng.toString(),animation: google.maps.Animation.DROP,
						icon:mapa.ipin
					});
	    	}catch(ex){
	    		alert('error:'+ex.description);
	    	}
			}
		}

		$(function(){
			mapa.init();
			lobo1.init();
			lobo2.init();
			$('input[type=button]').button();
			$('#lobo1').click(function(){lobo1.simulacion.play();});
			$('#lobo2').click(function(){lobo2.simulacion.play();});
		});
    </script>
	</head>
<body>
<h2>Chile es mar: Seguimiento lobos marinos via GPS</h2>
	<div id="controles" class="group">
			<div id="list" style="display:none;float:left" class="ui-state-error ui-corner-all"></div>
	</div>

	<div style="float:left;">
		<img src="ui/i/lobo1off.gif" id="lobo1" class="btn" title="Juliana" ><br/>
		<img src="ui/i/lobo2off.gif" id="lobo2" class="btn" title="Juliana" ><br/>
	</div>

	<div style="float:left;">
		<div id="map"></div>
	</div>

	<div id="msg" style="display:none;float:left" class="ui-state-error ui-corner-all"><span id="msg-text"></span></div>

</body>
</html>